<template>
  <div class="box">
    <template>
  <van-nav-bar
  title="购物车"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
  class="nav"
  right-text="清空购物车"
/>
  </template>
    <main>
      <ShopingCarVue ref="shopdetail"></ShopingCarVue>
      <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
     可能你想要
    </van-divider>
    <div class="goods-box">
      <div v-for="item in goodslist" :key="item.proid" @click="goGoodsDetail(item.proid)" class='goods'>
      <img :src="item.img1"/>
      <p class="title">{{item.proname}}</p>
      <p class="price">¥{{item.originprice}}</p>
    </div>
    </div>
    </main>
    <van-submit-bar :price="name" button-text="提交订单" @submit="onSubmit" >
   <van-checkbox v-model="checked" @click="all">全选</van-checkbox>
</van-submit-bar>
  </div>
</template>
<script>
import CategoryHeadVue from '@/components/Category-head.vue';
import ShopingCarVue from '@/components/ShopingCart.vue'
import axios from "axios";
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
   name : "Shoppingcar-vue",
   components:{
     ShopingCarVue,
     CategoryHeadVue
   },
   data(){
    return {
      checked:false,
      goodslist:[],
      pageIndex:1,
      name:0.00,
      show:false

    }
   },
   methods:{
    onSubmit(){
    this.$router.push("/confimgods")
    },
    goGoodsDetail(id){
      this.$router.push("/DetailPage/"+id);
    },
    all(){
      // 点击修改全部
      console.log(this.checked);
      axios.post("/api/cart/selectall",`userid=${localStorage.getItem("userid")}&type=${this.checked}`)
      .then(res=>{
        console.log(res);
        this.$nextTick(()=>{
          axios.post("/api/cart/list",`userid=${localStorage.getItem("userid")}`)
          .then(res=>{
            if(res.data.code == 200){
                 this.$refs.shopdetail.goodslist = res.data.data
            }else if(res.data.code=="10020"){
              this.msg = "您还未加入任何东西"
            }
          })
        this.allmoney()

      })
      })
      
    },
    allmoney(){
      axios.post("/api/cart/list",`userid=${localStorage.getItem("userid")}`)
        .then(res=>{
          let  arr = res.data.data.filter(res=>res.flag)
          let sum = 0;
          if(arr.length){
            for(var i = 0;i<arr.length;i++){
            sum += arr[i].num *arr[i].originprice
          }
          this.name  = sum 
          return
          }
          this.name = 0
  })
    },
    onClickLeft() {
      this.$router.go(-1)

    },
    onClickRight() {
      Dialog.alert({
    
      message: '亲，是否确认删除！',
    }).then(() => {
      // on close
      axios.post("/api/cart/removeall",`userid=${localStorage.getItem("userid")}`)
      .then(res=>{
        if(res.data.code == 200){
          Toast("删除成功")
          this.$refs.shopdetail.render()
        }
      })

    });
      

    },
   },
   created(){
    
    axios({
        url: "/api/pro/recommendlist",
        params: {
          count: this.pageIndex,
          limitNum: 12,
        },
      })
    .then(res=>{
      if (res.data.code == 200) {
            this.goodslist = res.data.data;
          }
    })
   },
}
</script>
<style scoped>
 .box{
  display: flex;
    flex-direction: column;
 }
 main{
  flex: 1;
  overflow: auto;
 }
 .goods-box{
  width: 100%;
  font-size: 14px;
  column-count: 2;
  column-gap: 5px;
 }
 .goods-box .goods{
  width: 100%;
  text-align: center;
  break-inside: avoid;
  background-color: white;
  margin-bottom: .25rem;
  border-radius: .5rem;
  box-sizing: border-box;
  padding: .25rem;
  box-shadow: none;
 }
 .goods img{
  width: 90%;
 }
 .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.price {
  text-align: left;
}

</style>